Vue.component("footer-area",{
    props:[],
    template:`
    <footer class="footer-area">

        <!-- Footer Top Area -->
        <div class="footer-top-area bg-grey section-padding-xs">
            <div class="container">
                <div class="row footer-widgets">

                    <!-- Single Widget -->
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <div class="footer-widget footer-widget-about">
                            <a href="index.html" class="footer-logo">
                                <img src="img/logo/logo-theme.png" alt="slimfit">
                            </a>
                            <p>我们希望通过每一杯咖啡，将 Coffee 的咖啡传承与独特的咖啡体验带给我们的顾客。</p>
                            <ul class="footer-social-icons">
                                <li><a href="#"><i class="ti ti-facebook"></i></a></li>
                                <li><a href="#"><i class="ti ti-instagram"></i></a></li>
                                <li><a href="#"><i class="ti ti-google"></i></a></li>
                                <li><a href="#"><i class="ti ti-pinterest"></i></a></li>
                                <li><a href="#"><i class="ti ti-twitter"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <!--// Single Widget -->

                    <!-- Single Widget -->
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <div class="footer-widget footer-widget-links footer-widget-links-1">
                            <h6 class="footer-widget-title">我的帐户</h6>
                            <ul>
                                <li><a href="#">跟踪订单</a></li>
                                <li><a href="#">退货政策</a></li>
                                <li><a href="#">保修时间</a></li>
                                <li><a href="#">付款</a></li>
                                <li><a href="#">常见问题解答</a></li>
                            </ul>
                        </div>
                    </div>
                    <!--// Single Widget -->

                    <!-- Single Widget -->
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <div class="footer-widget footer-widget-links footer-widget-links-2">
                            <h6 class="footer-widget-title">购物指南</h6>
                            <ul>
                                <li><a href="#">热销</a></li>
                                <li><a href="#">最佳销售</a></li>
                                <li><a href="#">供应商</a></li>
                                <li><a href="#">我们的商店</a></li>
                                <li><a href="#">当天的交易</a></li>
                            </ul>
                        </div>
                    </div>
                    <!--// Single Widget -->

                    <!-- Single Widget -->
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <div class="footer-widget footer-widget-contact">
                            <h6 class="footer-widget-title">联系信息</h6>
                            <ul>
                                <li><i class="ti ti-home"></i>广西南宁市</li>
                                <li><i class="ti ti-comment"></i>Coffee</li>
                                <li><i class="ti ti-mobile"></i><a href="tel:+8612345678901">(+86) 12345678901</a></li>
                                <li><i class="ti ti-timer"></i>8.00 am-6.00 pm</li>
                            </ul>
                        </div>
                    </div>
                    <!--// Single Widget -->

                </div>
            </div>
        </div>
        <!--// Footer Top Area -->

        <!-- Footer Bottom Area -->
        <div class="footer-bottom-area bg-dark">
            <div class="container">
                <div class="footer-copyright-area">
                    <p>Copyright © 2021 . All Right Reserved.</p>
                    <!--<img src="img/icons/payment.png" alt="payment icon">-->
                </div>
            </div>
        </div>
        <!--// Footer Bottom Area -->

    </footer>
    `
})
let footerArea = new Vue({
    el:"#footerArea",
})